<template>
<div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">
            <i class="el-icon-s-promotion"></i>
            后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>
           权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div>
        <el-button type="primary" size="medium"
                   @click="$router.push('/sys-admin/permission/permission/add-new')">
            添加权限</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="60" align="center"></el-table-column>

        <el-table-column prop="name" label="权限名" width="200" header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="value" label="权限范围" width="200" header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="简介"  header-align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="sort" label="序号" width="80"  header-align="center"
                         show-overflow-tooltip></el-table-column>

        <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
                <el-button type="primary"size="mini" icon="el-icon-edit" circle
                           @click="openEditDiaLog(scope.row)"></el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" circle
                           @click="openDeleteConfirm(scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="text-align: right;margin: 10px auto">
        <el-pagination
                background
                @current-change="changePage"
                layout="total, prev, pager, next"
                :total="total"
                :current-page="currentPage"
                :page-size="pageSize">
        </el-pagination>
    </div>
    <el-dialog title="修改权限详情" :visible.sync="dialogFormVisible">
        <el-form :model="editForm"  :rules="rules"   ref="editForm" label-width="100px">
            <el-form-item label="权限名" prop="name">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item label="权限范围" prop="value">
                <el-input v-model="editForm.value"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="description">
                <el-input v-model="editForm.description"></el-input>
            </el-form-item>
            <el-form-item label="序号" prop="sort">
                <el-input v-model="editForm.sort"></el-input>
            </el-form-item>

            <el-form-item label="角色"  prop="roleIds">
                <el-select v-model="editForm.roleIds"   multiple placeholder="请选择">
                    <el-option
                            v-for="item in roleListOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitEditForm('editForm')">确 定</el-button>
        </div>
    </el-dialog>

        <el-dialog title="权限详情" :visible.sync="dialogFormVisible2">
            <el-table
                    :data="tableData2"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="权限名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="value"
                        label="权限范围"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="简介">
                </el-table-column>
            </el-table>
        </el-dialog>
</div>
</template>

<script>
    export default {
     data(){
         return{
             roleListOptions:[],
             tableData: [],
             //权限表格
             tableData2:[],
             total:0,
             pageSize:0,
             currentPage:1,

             total2:0,
             pageSize2:0,
             currentPage2:1,
             dialogFormVisible:false,
             dialogFormVisible2:false,
             enable:'',
             editForm:{
                name: '',
                value:'',
                description: '',
                sort: 0,
                roleIds: [1]
             },
           rules: {
             roleIds: [
               {required: true, message: '请选择角色', trigger: 'blur'}
             ]
           },
         }

     },

        methods:{
            openPermissionById(permission){
                let url ='http://localhost:9281/permission/standard?id=' + permission.id;
                console.log('url = ' + url);
                let localJwt = localStorage.getItem('localJwt');

                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .get(url).then((response) =>{
                    let jsonResult =response.data;
                    if(jsonResult.state==20000){
                        this.tableData2 = jsonResult.data.list;
                        this.dialogFormVisible2 = true;
                        this.total=jsonResult.data.total;
                        this.pageSize=jsonResult.data.pageSize;
                        this.currentPage=jsonResult.data.currentPage;
                    }else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadPermissionList();
                            }
                        });
                    }}
                )

            },

            changePage(value){
                this.$router.replace('?page='+value)
                this.loadPermissionList();
            },


            openEditDiaLog(permission){
                let url ='http://localhost:9281/permission/standardById?id=' + permission.id;
                console.log('url = ' + url);
                let localJwt = localStorage.getItem('localJwt');

                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .get(url).then((response) =>{
                    let jsonResult =response.data;
                    if(jsonResult.state==20000){
                        this.editForm = jsonResult.data;
                        console.log(this.editForm);
                        this.dialogFormVisible = true;
                    }else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadPermissionList();
                            }
                        });
                    }}
                )
            },


            openDeleteConfirm(permission) {
                this.$confirm('此操作将永久删除【' + permission.id + '-' + permission.name + '】权限，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(permission);
                }).catch(() => {

                });
            },

            handleDelete(permission){
                let url ='http://localhost:9281/permission/delete';
                console.log('url='+url)

                let formData='id='+permission.id;
                console.log('formData='+formData);
                let localJwt = localStorage.getItem('localJwt');

                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .post(url,formData).then((response) =>{
                    let jsonResult =response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '删除权限成功！',
                            type: 'success'
                        });
                        this.loadPermissionList();
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadPermissionList();
                            }
                        });
                    } else if (jsonResult.state == 40900) {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                    else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                })
            },
            submitEditForm(formName){
              this.$refs[formName].validate((valid) => {
                    if (valid) {
                let url = 'http://localhost:9281/permission/update';
                console.log('url = ' + url);

                let formData = this.qs.stringify(this.editForm);
                console.log('formData = ' + formData);

                let localJwt = localStorage.getItem('localJwt');

                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .post(url, formData).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '修改管理员成功！',
                            type: 'success'
                        });
                        this.resetForm(formName);
                        this.dialogFormVisible = false;
                        this.loadPermissionList();
                    } else if (jsonResult.state == 40400){
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.dialogFormVisible = false;
                                this.loadPermissionList();
                            }
                        });
                    } else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                });
            }else {
                      console.log('error submit!!');
                      return false;
                    }
              });
            },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },

            loadPermissionList(){
                let page = this.$router.currentRoute.query.page;
                console.log(page)
                if (!page) {
                    page = 1;
                }
                let url = 'http://localhost:9281/permission/list?page=' + page;
                console.log('url = ' + url);
                let localJwt = localStorage.getItem('localJwt');
                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .get(url).then((response) =>{
                    let jsonResult =response.data;
                    if(jsonResult.state==20000){
                        this.tableData=jsonResult.data.list;
                        console.log(this.tableData)
                        this.total=jsonResult.data.total;
                        this.pageSize=jsonResult.data.pageSize;
                        this.currentPage=jsonResult.data.currentPage;
                    }else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                })
            },

            loadRoleList() {
                let url = 'http://localhost:9281/role/list';
                console.log('url = ' + url);

                let localJwt = localStorage.getItem('localJwt');

                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .get(url).then((response) => {
                    let jsonResult = response.data;
                    this.roleListOptions = jsonResult.data;
                });
            }

        },

        mounted(){
            this.loadPermissionList();
            this.loadRoleList()
        }

    }


</script>

<style scoped>

</style>